import { defineComponent, reactive, ref } from "vue";
import styles from "./cooperateCompany.module.less";
import { imgPath } from "@/common/utils";
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
import { useRouter } from "vue-router";

export default defineComponent({
  name: 'cooperateCompany',
  setup() {
    const router = useRouter();
    const cooperateCompany = reactive({
      iconList: [
        {
          imgBox: [
            {
              imgs: () => <img src={imgPath('/home/insuranceIcon1.png')} />,
              path: 'https://e.picc.com/servicecenter/#/selfService/agencyNetworkQuery/',
            },
            {
              imgs: () => <img src={imgPath('/home/insuranceIcon2.png')} />,
              path: 'https://property.pingan.com/gongkaixinxipilu/fenzhijigou.shtml',
            },
            {
              imgs: () => <img src={imgPath('/home/insuranceIcon3.png')} />,
              path: 'https://www.cpic.com.cn/xccbx/gygs/fzjg/index.shtml?skip',
            },
            {
              imgs: () => <img src={imgPath('/home/insuranceIcon4.png')} />,
              path: 'https://wecare.sinosig.com/page/prpDCompany/prpDCompanyList.shtml',
            },
            {
              imgs: () => <img src={imgPath('/home/insuranceIcon5.png')} />,
              path: 'http://www.ccic-net.com.cn/zjdd/fzjg/',
            },
            {
              imgs: () => <img src={imgPath('/home/insuranceIcon6.png')} />,
              path: 'https://www.cntaiping.com/departList.jspx?tcCode=TP03',
            },
            {
              imgs: () => <img src={imgPath('/home/insuranceIcon7.png')} />,
              path: 'https://www.yaic.com.cn/index/node',
            },
            {
              imgs: () => <img src={imgPath('/home/insuranceIcon8.jpeg')} />,
              path: 'https://e.cic.cn/web/publicService/toServicePage.do?index=6',
            },
          ]
        },
        {
          imgBox: [
            {
              imgs: () => <img src={imgPath('/home/insuranceIcon9.png')} />,
              path: 'https://www.chinalife.com.cn/chinalife/index/',
            },
            {
              imgs: () => <img src={imgPath('/home/insuranceIcon10.jpg')} />,
              path: 'https://pc.ehuatai.com/Uploads/File/2020/05/11/u5eb8a1d84b4d1.pdf',
            },
            {
              imgs: () => <img src={imgPath('/home/insuranceIcon11.png')} />,
              path: 'https://www.sinosafe.com.cn/shop/about/fgsjg/',
            },
            {
              imgs: () => <img src={imgPath('/home/insuranceIcon12.png')} />,
              path: 'https://life.hnchasing.com/web/info/basicinfo/compstatus/index.jsp',
            },
            {
              imgs: () => <img src={imgPath('/home/insuranceIcon13.png')} />,
              path: 'https://www.zhongan.com/corporate/office/',
            },
            {
              imgs: () => <img src={imgPath('/home/insuranceIcon14.png')} />,
              path: 'https://www.capli.com.cn/',
            },
          ]
        }
      ]
    })
    const carouselEL = ref(null as any);
    return () => (
      <div class={styles.cooperateCompany}>
        <div class={styles.header}>
          <div class={styles.title}>合作保险公司</div>
          {/* <div class={styles.word}>本平台保险产品由下述保险公司提供，承保公司省级分支机构和落地服务机构清单请点击logo查询</div> */}
        </div>
        <div class={styles.container}>
          <div class={styles['swiper-box']}>
            <img class={styles['imgs-box']} src={imgPath('/home/insuranceIcon1.jpg')} />
            {/* <LeftOutlined class={styles['field-icon']} onClick={() => { carouselEL.value.prev() }} />
            <a-carousel class={styles.swiper} ref={carouselEL}>
              {
                cooperateCompany.iconList.map((itemX: any) => (
                  <div class={styles.test}>
                    {
                      itemX.imgBox.map((itemY: any) => (
                        <div class={[styles['img-box']]} onClick={() => window.open(itemY.path)}>
                          <itemY.imgs/>
                        </div>
                      ))
                    }
                  </div>
                ))
              }
            </a-carousel>
            <RightOutlined class={styles['field-icon']} onClick={() => { carouselEL.value.next() }} /> */}
          </div>
        </div>
      </div>
    )
  }
})